<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.paper_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          size="small"
          icon="el-icon-document"
          plain
          v-if="permission.paper_cj"
          @click="handleCj(scope.row)">
          出卷
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-view"
          plain
          v-if="permission.paper_yl"
          @click="handleYl(scope.row)">
          预览
        </el-button>
      </template>
      <template slot="zfForm">
        <div>
          <el-input v-model="zfs"/>
        </div>
      </template>
    </avue-crud>
    <el-dialog
      title="出卷"
      append-to-body
      :visible.sync="cjBox"
      class="cj"
      width="35%">
      <el-form :model="controlForm" :rules="controlRules">
        <div class="risk_control_basic">
          <el-col :span="12">
          <el-form-item label="单选数量：" prop="dxxl">
            <div class="disabled_basic_div">
                <span>{{selected_danx}}<i :class="danx" style="margin-left:5px;color: green;"></i></span>
            </div>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="多选数量：" prop="dxNum">
            <div class="disabled_basic_div" v-if="form.dxNum===controlForm.dxNum">
              <span>{{selected_duox}}<i :class="duox" style="margin-left:5px;color: green;"></i></span>
            </div>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="判断数量：" prop="dxNum">
            <div class="disabled_basic_div">
              <span>{{selected_pd}}<i :class="pd" style="margin-left:5px;color: green;"></i></span>
            </div>
          </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="填空数量：" prop="dxNum">
                <div class="disabled_basic_div">
                  <span>{{selected_tk}}<i :class="tk" style="margin-left:5px;color: green;"></i></span>
                </div>
              </el-form-item>
          </el-col>
        </div>
        <div class="risk_control_footer">
          <el-button
            slot="idsForm"
            type="primary"
            size="small"
            @click="tjtm">
            添加题目
          </el-button>
          <span v-if="questionTagsErr" class="error"></span>
          <div class="risk_point_list" style="margin-top: 5px;">
            <el-tag :key="index" v-for="(tag, index) in questions" closable :disable-transitions="false" @close="closeQuestionTag(index)">{{tag.stnr}}</el-tag>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeCj()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="试题库"
      append-to-body
      :visible.sync="tmBox"
      @close='closetm'
      width="50%">
      <avue-crud :option="questionOption"
                 :table-loading="questionLoading"
                 :data="questionData"
                 :page.sync="questionPage"
                 ref="questionCrud"
                 @search-change="questionSearchChange"
                 @search-reset="questionSearchReset"
                 @selection-change="questionSelectionChange"
                 @current-change="questionCurrentChange"
                 @size-change="questionSizeChange">
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closetm">取 消</el-button>
        <el-button type="primary" @click="chooseQuestion()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="试卷预览"
      append-to-body
      :visible.sync="tmylBox"
      @close='closetmyl'
      width="50%">
     <div class="grid-content"><h1>{{kcmc}}</h1></div>
      <div style="height:500px;" class="scrollbar">
        <el-scrollbar style="height:100%">
          <div class="bk">
            <el-row>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>单选数量:{{controlForm.dxxl}}</el-text></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>单选分数:{{controlForm.dxfz}}</el-text></div></el-col>
            </el-row>
            <div v-for="(item,index1) in questions" :key="index1">
            <div v-if="item.stlx===1">
            <el-text class="tm">{{index1+1+"."+item.stnr}}(单选)</el-text><br>
            <el-text class="da">A.{{item.xxA}}</el-text>
            <el-text class="da">B.{{item.xxB}}</el-text>
            <el-text class="da">C.{{item.xxC}}</el-text>
            <el-text class="da">D.{{item.xxD}}</el-text><br>
            </div>
          </div>
          </div>
          <div class="bk">
            <el-row>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>多选数量:{{controlForm.dxNum}}</el-text></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>多选分数:{{controlForm.dxScore}}</el-text></div></el-col>
            </el-row>
            <div v-for="(item2,index2) in questions" :key="index2">
            <div v-if="item2.stlx===2">
              <el-text class="tm">{{index2+1+"."+item2.stnr}}(多选)</el-text><br>
              <el-text class="da">A.{{item2.xxA}}</el-text>
              <el-text class="da">B.{{item2.xxB}}</el-text>
              <el-text class="da">C.{{item2.xxC}}</el-text>
              <el-text class="da">D.{{item2.xxD}}</el-text><br>
            </div>
            </div>
          </div>
          <div class="bk">
            <el-row>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>填空数量:{{controlForm.tksl}}</el-text></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>填空分数:{{controlForm.tkfz}}</el-text></div></el-col>
            </el-row>
            <div v-for="(item3,index3) in questions" :key="index3">
            <div v-if="item3.stlx===3">
              <el-text class="tm">{{index3+1+"."+item3.stnr}}(填空)</el-text>
              <avue-input size="small" placeholder="请输入内容"></avue-input>
            </div>
            </div>
          </div>
          <div class="bk">
            <el-row>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>判断数量:{{controlForm.pdsl}}</el-text></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple"><el-text>判断分数:{{controlForm.pdfz}}</el-text></div></el-col>
            </el-row>
            <div v-for="(item4,index4) in questions" :key="index4">
            <div v-if="item4.stlx===4">
              <el-text class="tm">{{index4+1+"."+item4.stnr}}(判断)</el-text><br>
              <el-text class="da">A.{{item4.xxA}}</el-text>
              <el-text class="da">B.{{item4.xxB}}</el-text><br>
            </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closetmyl">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      append-to-body
      :visible.sync="determineBox"
      @close='closetm'
      width="30%">
      <h3>不符合出卷规则,是否确定退出！</h3>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="choosedetermine()">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove , getQusetion,addQuertion,getst,getKcmc} from "@/api/jypx/edupaper/paper";
  import {mapGetters} from "vuex";
  import {validateDigit} from "@/api/mmhi/validate";

  export default {
    data() {
      return {
        determineBox:false,
        kcmc:"",
        questions:[],
        tmylBox:false,
        rows:{},
        courseId:"",
        //出卷弹窗
        cjBox:false,
        tmBox:false,
        controlForm:{
          dxxl:"",
          dxfz:"",
          dxNum:"",
          dxScore:"",
          pdsl:"",
          pdfz:"",
          tksl:"",
          tkfz:""
        },
        controlRules:{
          dxxl:[{required: false, message: '请输入单选数量', trigger: 'blur'}],
          dxNum:[{required: false, message: '请输入多选数量', trigger: 'blur'}],
          pdsl:[{required: false, message: '请输入判断数量', trigger: 'blur'}],
          tksl:[{required: false, message: '请输入填空数量', trigger: 'blur'}],
        },
        dialogQuestion: false,
        questionQuery: {},
        questionLoading: true,
        questionPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        questionSelectionList: [],
        questionOption: {
          calcHeight: 30,
          tip: true,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          menu: false,
          addBtn: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          refreshBtn: false,
          columnBtn: false,
          column: [
            {
              label: "试题科目",
              prop: "courseId",
              align: "center",
              row: false,
              search: true,
              slot: false,
              type: "select",
              dicUrl: "/api/eduCourse/course/getCourseKcmc",
              props: {
                label: "kcmc",
                value: "id",
              },
            },
            {
              label: "试题类型",
              prop: "stlx",
              search: true,
              type: "select",
              align: "center",
              dataType: "number",
              dicUrl: "/api/blade-system/dict/dictionary?code=stbh",
              props: {
                label: "dictValue",
                value: "dictKey"
              }
            },
            {
              label: "试题内容",
              prop: "stnr",
              align: "center",
            },
            {
              label: "A",
              prop: "xxA",
              align: "center",
            },
            {
              label: "B",
              prop: "xxB",
              align: "center",
            },
            {
              label: "C",
              prop: "xxC",
              align: "center",
            },
            {
              label: "D",
              prop: "xxD",
              align: "center",
            },
          ]
        },
        questionData: [],
        // questionTags: [],
        questionTagsErr: false,
        selectQuestion: {},

        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "培训类别",
              prop: "pxlb",
              type: "select",
              search: true,
              align: "center",
              dataType: "number",
              cascaderIndex:0,
              cascaderItem: ['courseId'],
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=pxlb",
              props: {
                label: "dictValue",
                value: "dictKey"
              }
            },
            {
              label: "试题科目",
              prop: "courseId",
              align: "center",
              row: false,
              search: true,
              slot: false,
              type: "select",
              cascaderIndex:0,
              dicUrl: "/api/eduCourse/course/getCourseKcmc?code={{key}}",
              props: {
                label: "kcmc",
                value: "id",
              },
              rules: [{
                required: true,
                message: "试题科目",
                trigger: "blur",
              }]
            },
            {
              label: "单选数量",
              prop: "dxxl",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "单选分数",
              prop: "dxfz",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "多选数量",
              prop: "dxNum",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "多选分数",
              prop: "dxScore",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "填空数量",
              prop: "tksl",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "填空分数",
              prop: "tkfz",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "判断数量",
              prop: "pdsl",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "判断分数",
              prop: "pdfz",
              align: "center",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "及格分数线",
              prop: "jgfsx",
              align: "center",
              width: "90px",
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }]
            },
            {
              label: "总分",
              prop: "zf",
              align: "center",
              formslot: true,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "添加题目",
              prop: "ids",
              align: "center",
              hide: true,
              viewDisplay: false,
              addDisplay: false,
              editDisplay: false,
              formslot:true,
              labelslot:true
            },
            {
              label: "企业id",
              prop: "bladeDeptId",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "租户id",
              prop: "tenantId",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建人",
              prop: "createUser",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建部门",
              prop: "createDept",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "修改用户",
              prop: "updateUser",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "修改时间",
              prop: "updateTime",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.paper_add, true),
          viewBtn: this.vaildData(this.permission.paper_view, false),
          delBtn: this.vaildData(this.permission.paper_delete, false),
          editBtn: this.vaildData(this.permission.paper_edit, false),
          cjBtn: this.vaildData(this.permission.paper_cj, false),
          ylBtn: this.vaildData(this.permission.paper_yl, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      qids() {
        let qids = [];
        this.questionSelectionList.forEach(ele => {
          qids.push(ele.id);
        });
        return qids.join(",");
      },
      selected_danx:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==1){
            selected++;
          }
        }
        return selected+" / "+this.controlForm.dxxl;
      },
      selected_duox:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==2){
            selected++;
          }
        }
        return selected+" / "+this.controlForm.dxNum;
      },
      selected_pd:function() {
        let selected = 0;
        for (let i = 0; i < this.questions.length; i++) {
          if (this.questions[i].stlx == 4) {
            selected++;
          }
        }
        return selected + " / " + this.controlForm.pdsl;
      },
      selected_tk:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==3){
            selected++;
          }
        }
        return selected+" / "+this.controlForm.tksl;
      },
      danx:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==1){
            selected++;
          }
        }
        if (selected==this.controlForm.dxxl){
          return 'el-icon-circle-check';
        }else {
          return 'el-icon-circle-close';
        }
      },
      duox:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==2){
            selected++;
          }
        }
        if (selected==this.controlForm.dxNum){
          return 'el-icon-circle-check';
        }else {
          return 'el-icon-circle-close';
        }
      },
      tk:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==3){
            selected++;
          }
        }
        if (selected==this.controlForm.tksl){
          return 'el-icon-circle-check';
        }else {
          return 'el-icon-circle-close';
        }
      },
      pd:function(){
        let selected=0;
        for(let i=0;i<this.questions.length;i++){
          if(this.questions[i].stlx==4){
            selected++;
          }
        }
        if (selected==this.controlForm.pdsl){
          return 'el-icon-circle-check';
        }else {
          return 'el-icon-circle-close';
        }
      },
      zfs:function(){
        let zf=(this.form.dxfz-0)+(this.form.dxScore-0)+(this.form.tkfz-0)+(this.form.pdfz-0);
        return zf
      }



    },
    methods: {
      choosedetermine(){
        this.cjBox=false
        this.determineBox=false
      },


      //打开试卷预览弹窗
      handleYl(row){
        this.tmylBox=true
        this.questions = [];
          getst(row.id).then(res => {
            this.form = res.data.data;
            this.form.questions.forEach(item => {
              this.questions.push(item)
              console.log(this.questions)

            });
          });
        getDetail(row.id).then(response => {
          console.log(row.id)
          this.controlForm=response.data.data;

        });
        getKcmc(row.courseId).then(response => {
          this.kcmc=response.data.data.kcmc;
        });
      },
      //关闭试卷预览弹窗
      closetmyl() {
        this.tmylBox=false
      },
      //打开试题弹窗
      tjtm(){
        this.tmBox=true
        this.questionOnLoad(this.questionPage);
      },
      //关闭试题弹窗
      closetm() {
        this.tmBox=false
        this.questionPage.currentPage = 1;
        this.questionSelectionClear();
      },
      //试题获取表格数据
      questionOnLoad(page,params={}){
        this.questionLoading=true;
        getQusetion(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.questionPage.total = data.total;
          this.questionData = data.records;
          this.questionLoading = false;
          // this.questionData.forEach(row => {
          //   for(let i=0;i<this.questions.length;i++){
          //     if(this.questions[i].id==row.id) {
          //       this.$refs.questionCrud.toggleRowSelection(row, true);
          //       break;
          //     }
          //   }
          // });
          if(this.selectQuestion !== undefined && JSON.stringify(this.selectQuestion) !== "{}" && this.questions.length !== 0) {
            this.$nextTick(() => {
              this.questionData.forEach(row => {
                if(this.selectQuestion[row.id] !== undefined&&this.selectQuestion[row.id]!=null) {
                  this.$refs.questionCrud.toggleRowSelection(row, true);
                }
              })
            })
          }
        });
      },
      // 试题清空勾选
      questionSelectionClear() {
        this.questionSelectionList = [];
        this.$refs.questionCrud.toggleSelection();
      },
      // 试题搜索条件改变事件
      questionSearchChange(params, done) {
        this.questionQuery = params;
        this.questionPage.currentPage = 1;
        this.questionOnLoad(this.questionPage, params);
        done();
      },
      // 试题清空搜索条件
      questionSearchReset() {
        this.questionQuery = {};
        this.questionOnLoad(this.questionPage);
      },
      // 试题勾选
      questionSelectionChange(list) {
        this.questionSelectionList = list;
      },
      // 试题勾换页数
      questionCurrentChange(currentPage){
        var pageSelectIds = [];
        var pageAllIds = [];
        this. questionSelectionList.forEach(item => {
          this.selectQuestion[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.questionData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(var id in this.selectQuestion) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectQuestion[id];
          }
        }
        this.questionPage.currentPage = currentPage;
        this.questionOnLoad(this.questionPage);
      },
      // 试题勾换每页显示数量
      questionSizeChange(pageSize){
        this.questionPage.pageSize = pageSize;
        this.questionOnLoad(this.questionPage);
      },
      // 选择试题
      chooseQuestion(done,loading) {
        var pageSelectIds = [];
        var pageAllIds = [];
        this.questionSelectionList.forEach(item => {
          this.selectQuestion[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.questionData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectQuestion) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectQuestion[id];
          }
        }
        if(this.selectQuestion === undefined || JSON.stringify(this.selectQuestion) === "{}") {
          this.$message.warning("请选择试题");
          return;
        }
        this.questionTagsErr = false;
        this.questions = [];
        for(let id in this.selectQuestion) {
          this.questions.push(this.selectQuestion[id]);
        }
        this.rows.courseid=this.courseId
        console.log(this.rows.courseid+"11")
        this.rows.ids=this.qids
        console.log(this.rows.ids+"222")
        addQuertion(this.rows,done,loading).then(() => {
          this.onLoad(this.page);
          // this.$message({
          //   type: "success",
          //   message: "操作成功!"
          // });
          // done();
        }, error => {
          loading();
          window.console.log(error);
        });
        if (this.danx!='el-icon-circle-check'){
          this.$message.warning("单选数量不符合出题规则");
          loading();
          return
        }else if(this.duox!='el-icon-circle-check'){
          this.$message.warning("多选数量不符合出题规则");
          loading();
          return
        }else if(this.tk!='el-icon-circle-check'){
          this.$message.warning("填空数量不符合出题规则");
          loading();
          return
        }else if(this.pd!='el-icon-circle-check'){
          this.$message.warning("判断数量不符合出题规则");
          loading();
          return
        }else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.closetm();
          return
        }
      },
      //关闭出卷弹窗
      closeCj() {

        if (this.danx!='el-icon-circle-check'){
          // this.$message.warning("单选数量不符合出题规则");
          this.determineBox=true
          return
        }
        if (this.duox!='el-icon-circle-check'){
          //this.$message.warning("多选数量不符合出题规则");
          this.determineBox=true
          return
        }
        if (this.tk!='el-icon-circle-check'){
          //this.$message.warning("填空数量不符合出题规则");
          this.determineBox=true
          return
        }
        if (this.pd!='el-icon-circle-check'){
          //this.$message.warning("判断数量不符合出题规则");
          this.determineBox=true
          return
        }
        this.cjBox=false
        console.log(this.selected_danx.length)
        console.log(this.danx)
      },
      // 删除某一个试题标签
      closeQuestionTag(index) {

        this.questions.splice(index, 1);
        if(this.questions.length === 0) {
          this.questionTagsErr = true;
        }
        for(let id in this.selectQuestion) {
          if(this.questions[id]!=this.selectQuestion[id]) {
            console.log(this.questions[id])
            // console.log(this.selectQuestion[id])
            this.selectQuestion[id]=null;
            break;
          }
        }
        console.log(this.questions);
        console.log(this.selectQuestion);

      },
      //打开出卷弹窗
      handleCj(row){
        this.cjBox=true
        getDetail(row.id).then(response => {
          this.controlForm=response.data.data;
          this.courseId=response.data.data.id

        });
        this.questionTagsErr = false;
        this.selectQuestion = {};
        this.questions=[];
        getst(row.id).then(response => {
          this.form=response.data.data;
          // console.log(this.form.dxxl)
          this.form.questions.forEach(tag => {
            this.questions.push(tag);
            this.selectQuestion[tag.id] = tag;
          });
        });
      },

      rowSave(row, done, loading) {
        if (row.jgfsx>this.zfs){
          this.$message.warning("及格分大于总分");
          loading();
          return
        }
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        if (row.jgfsx>this.zfs){
          this.$message.warning("及格分大于总分");
          loading();
          return
        }
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
            console.log(this.form)
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style lang="scss">
  @import "./styles/riskpointglobal.scss";
  .bk{
    border-style: groove;
    background-color: #99a9bf;
  }
  .tm{
    font-size: 25px;
  }
  .da{
    margin-left: 100px;
    font-size:20px;
  }
  .cj{
    margin-top: -5%;
  }
  .paper{
    margin-top: -5%;
    background-color: #0719b8;
    opacity: 0.3;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    font-family: "Lucida Console", "Courier New", monospace;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .dialog-footer{
    margin-right: 20px;
  }
</style>

<style lang="scss" scpoed >
  @import "./styles/riskpointscoped.scss";
  .el-dialog__body{padding: 0px 20px;}
  .risk_point_list .el-tag{margin-left: 5px;}

  /deep/ .scrollbar {
    white-space: nowrap;  //强制一行显示（看需要）
    .el-scrollbar {
      display: flex;
      justify-content: space-around;
      padding: 0 10px;
    }
    /deep/ .el-scrollbar__wrap {  // 必要的
      overflow: scroll;
      width: 110%;  //隐藏侧边默认滚动条 （达不到效果可以自己试着微调） 如解决不了可尝试用 `margin-right -60px`
      height: 100%;  //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）
    }
  }
</style>
